import { useAppDispatch } from '@/store';
import { postOrPutHospitalSaveSync, useHospState } from '@/store/modules/hosp';
import { Button, Form, Input, Modal, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

const SetModal = ({ visible, setVisible, modalTitle, upHospInfo }: any) => {
    // 创建form实例
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    // 获取数据状态。
    const { setLoading } = useHospState();
    useEffect(() =>{
        if (upHospInfo.id)
            form.setFieldsValue(upHospInfo as any);

    }, [upHospInfo])

    return (
        <Modal
            visible={visible}
            title={modalTitle}
            okText="Create"
            cancelText="Cancel"
            // 不允许通过蒙层关闭
            maskClosable={false}
            // 移除底部按钮部分
            footer={null}
            onCancel={() => {
                form.resetFields();// 重置表单数据
                setVisible(false);
            }}
        >
            <Form
                // initialValues={{...upHospInfo}}
                onFinish={async (values: any) => {
                    await dispatch(postOrPutHospitalSaveSync(values));
                    form.resetFields();
                    setVisible(false);
                }}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                form={form}
                name="form_in_modal"
            >
                <Form.Item
                    hidden
                    name="id"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="hosname"
                    label="医院名称"
                    rules={[{ required: true, min: 2, max: 20, message: '医院名称不合法' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="hoscode"
                    rules={[{ required: true, message: '医院编号不合法' }]}
                    label="医院编号">
                    <Input type="textarea" />
                </Form.Item>
                <Form.Item
                    name="apiUrl"
                    rules={[{
                        required: true,
                        message: 'api基础地址不合法',
                        pattern: /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
                    }]}
                    label="api基础地址">
                    <Input type="textarea" />
                </Form.Item>

                <Form.Item
                    name="contactsName"
                    rules={[{ required: true, message: '联系人姓名不合法' }]}
                    label="联系人姓名">
                    <Input type="textarea" />
                </Form.Item>
                <Form.Item
                    name="contactsPhone"
                    rules={[{
                        required: true,
                        pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                        message: '联系人手机不合法'
                    }]}
                    label="联系人手机">
                    <Input type="textarea" />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button loading={setLoading} type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button onClick={() => {
                            // 重置表单
                            form.resetFields();
                        }} htmlType="button" >
                            重置
                        </Button>
                    </Space>

                </Form.Item>

            </Form>
        </Modal >
    );
};

export default SetModal;